import { useState } from "react";
import { Divider, Slider, Flex, InputNumber } from "antd";
const View = () => {
    const [value, setValue] = useState(20);
    const onChange = (value) => {
        setValue(value);
    };
    return (
        <>
            <h1>Slider滑动输入条</h1>
            <Divider>
                <h3>基本使用</h3>
            </Divider>
            <Flex gap={20}>
                <Slider
                    style={{ width: 300 }}
                    onChange={onChange}
                    min={10}
                    max={90}
                    defaultValue={20}
                />
                <Slider
                    style={{ width: 300 }}
                    onChange={onChange}
                    min={10}
                    step={5}
                    max={90}
                    value={value}
                    defaultValue={20}
                />
                <InputNumber status='error' value={value} onChange={onChange} />
            </Flex>
            <Divider>
                <h3>标签滑动输入条</h3>
            </Divider>
            <Flex gap={20}>
                <Slider
                    style={{ width: 300 }}
                    onChange={onChange}
                    min={10}
                    max={90}
                    defaultValue={20}
                    tooltip={{
                        open: true,
                        formatter: (val) => `${val}°C`,
                    }}
                    marks={{ 10: "10°C", 30: "30°C", 50: "50°C", 70: "70°C" }}
                />
            </Flex>
        </>
    );
};

export default View;
